<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/platform/myCenter' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>实训任务</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/platform/myTask' }">我的任务</el-breadcrumb-item>
      <el-breadcrumb-item>教程学习</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-row type="flex" class="row-bg" justify="center" :gutter="20">
        <el-col :span="4"><div class="grid-content">
          <img src="../assets/stu/pic_task_color_1.png" @click="goLearn()"/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
          <img src="../assets/stu/pic_arrow_grey.png" v-if="step.num < 2"/>
          <img src="../assets/stu/pic_arrow_blue.png"  v-else/>
        </div></el-col>
        <el-col :span="4"><div class="grid-content">
          <img src="../assets/stu/pic_task_grey_2.png" @click="goNext()" v-if="step.num < 2"/>
          <img src="../assets/stu/pic_task_color_2.png" @click="goNext()" v-else/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
          <img src="../assets/stu/pic_arrow_grey.png" v-if="step.num < 3"/>
          <img src="../assets/stu/pic_arrow_blue.png"  v-else/>
        </div></el-col>
        <el-col :span="4"><div class="grid-content">
          <img src="../assets/stu/pic_task_grey_3.png" @click="toMonitor()" v-if="step.num < 3"/>
          <img src="../assets/stu/pic_task_color_3.png" @click="toMonitor()" v-else/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
          <img src="../assets/stu/pic_arrow_grey.png" v-if="step.num < 4"/>
          <img src="../assets/stu/pic_arrow_blue.png"  v-else/>
        </div></el-col>
        <el-col :span="4"><div class="grid-content">
          <img src="../assets/stu/pic_task_grey_4.png" @click="toMonitor2()" v-if="step.num < 4"/>
          <img src="../assets/stu/pic_task_color_4.png" @click="toMonitor2()" v-else/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
          <img src="../assets/stu/pic_arrow_grey.png" v-if="step.num < 5"/>
          <img src="../assets/stu/pic_arrow_blue.png"  v-else/>
        </div></el-col>
        <el-col :span="4"><div class="grid-content">
          <img src="../assets/stu/pic_task_grey_5.png" @click="goReport()"  v-if="step.num < 5"/>
          <img src="../assets/stu/pic_task_color_5.png" @click="goReport()" v-else/>
        </div></el-col>
      </el-row>
    </div>
    <div>
      <div class="contain">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myUrl: '',
        taskINFO: this.$store.state.taskINFO,
        step: this.$store.state.step // 步骤图现实
      }
    },
    methods: {
      goLearn (row) {
        this.$store.dispatch('updateStep', 1)
        this.$router.push({path: '/platform/learn/explain'})
      },
      goNext () {
        this.$store.dispatch('updateStep', 2)
        this.$router.push({path: '/platform/learn/textbook'})
      },
      toMonitor () {
        this.$store.dispatch('updateStep', 3)
        this.$router.push({path: '/platform/learn/monitor'})
      },
      toMonitor2 () {
        this.$store.dispatch('updateStep', 4)
        this.$router.push({path: '/platform/learn/monitor'})
      },
      tofinish () {
        this.$store.dispatch('updateStep', 5)
        this.$router.push({path: '/platform/myTask'})
      },
      goReport () {
        this.$store.dispatch('updateStep', 5)
        this.$router.push({path: '/platform/learn/report'})
      }
    }
  }
</script>

<style scoped lang="less">
  .el-breadcrumb {
    margin-top: 5px;
  }
  .el-row {
    margin-top: 20px;
    .arrow {
      img {
        margin-top: 38px;
        margin-left: -10px;
      }
    }
    .grid-content {
      border-radius: 4px;
      min-height: 120px;
      cursor: pointer;
      img {
        margin-top: 0px;
        width: 100%;
      }
    }
  }

  .contain {
    border: 1px solid #f2f2f2;
    margin-top: 20px;
  }
</style>
